<template>
    <rx-dialog @handOk="okFun" @cancel="cancel">
        <rx-layout>
            <div slot="center" style="height: 100%;">
                <rx-fit>
                    <div style="width: 1100px;height:100%;text-align: left;margin: auto;position: relative;">
                        <div style="position: absolute;top: 0;left: 0;width: 500px;">
                            <span>{{i18n('form.classes','班次')}}：</span>
                            <a-select id="tempType" v-model="timeBlockValue" style="width: 30%">
                                <a-select-option v-for="item in calTimeBlockList" :key="item.settingId"
                                                 :value="item.settingId">{{item.settingName}}
                                </a-select-option>
                            </a-select>
                            <a-button class="tabButton" style="margin-left: 6px" @click="addCalTimeBlock"
                                      type="primary">{{i18n('list.set','设置')}}
                            </a-button>
                        </div>
                        <rx-full-calendar
                            style="height: 90%"
                            v-if="showFullCalendar"
                            ref="fullCalendar"
                            v-model="calendarEvents"
                            @selectInfo="selectInfo"
                            @removeInfo="removeInfo">

                        </rx-full-calendar>
                    </div>
                </rx-fit>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import BpmCalCalendarApi from '@/api/bpm/core/bpmCalCalendar'
    import BpmCalTimeBlockApi from '@/api/bpm/core/bpmCalTimeBlock'
    import {RxLayout, RxFullCalendar, RxFit, BaseList, RxDialog, Util} from '@lowcode/jpaas-common-lib';

    export default {
        name: 'bpm-cal-calendar-edit',
        mixins: [BaseList],
        components: {
            RxFit,
            RxLayout,
            RxFullCalendar,
            RxDialog,
            Util
        },
        props: {
            layerid: String,
            lydata: Object,
            destroy: Function,
            settingId: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                selectEvent: {},
                timeBlockValue: "",
                calTimeBlockList: [],
                calendarEvents: [],
                showFullCalendar: false
            }
        },
        created() {
            this.getCalTimeBlockList();
            this.getWorkCalendarBySettingId();
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "bpmCalSetting", key);
            },
            addCalTimeBlock() {
                if (!this.selectEvent || !this.selectEvent.startStr) {
                    this.$confirm({
                        title: this.i18n('warning', '警告'),
                        content: this.i18n('selectDate', '请先选择开始和结束日期！'),
                        okText: this.$ti18('rxForm.ackBtn', '确认'),
                        cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                        zIndex: 9999
                    });
                    return;
                }
                if (!this.timeBlockValue) {
                    this.$confirm({
                        title: this.i18n('warning', '警告'),
                        content: this.i18n('selectClass', '请先选择班次！'),
                        okText: this.$ti18('rxForm.ackBtn', '确认'),
                        cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                        zIndex: 9999
                    });
                    return;
                }
                var self_ = this;
                var parameter = {
                    start: Date.parse(this.selectEvent.start),
                    end: Date.parse(this.selectEvent.end),
                    timeBlockValue: this.timeBlockValue,
                    calSettingId: this.settingId,
                };
                BpmCalCalendarApi.drawCalendar(parameter).then(res => {
                    if (!res.success) {
                        self_.$confirm({
                            title: this.i18n('warning', '警告'),
                            content:  this.i18n('unCross', '时间区间不能交错！'),
                            okText: this.$ti18('rxForm.ackBtn', '确认'),
                            cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                            zIndex:20004
                        });
                        return;
                    }
                    self_.selectEvent.title = res.text;
                    self_.selectEvent.id = res.id;
                    self_.$refs.fullCalendar.addInfo(self_.selectEvent);
                    self_.selectEvent = {};
                })
            },
            getCalTimeBlockList() {
                var self_ = this;
                BpmCalTimeBlockApi.queryTimeBlockList().then(res => {
                    self_.calTimeBlockList = res.data;
                })
            },
            getWorkCalendarBySettingId() {
                var self_ = this;
                return BpmCalCalendarApi.getWorkCalendarBySettingId(this.settingId).then(res => {
                    if (res && res.length > 0) {
                        self_.calendarEvents = res;
                    } else {
                        self_.calendarEvents = [];
                    }
                    self_.showFullCalendar = true;
                })
            },
            selectInfo(info) {
                this.selectEvent = info;
            },
            removeInfo(info) {
                var self_ = this;
                var id = info.event.id;
                return BpmCalCalendarApi.delByConnectId(id).then(res => {
                    if (res.success) {
                        var indexValue = self_.getIndex(id);
                        self_.$refs.fullCalendar.removeInfo(indexValue);
                    } else {
                        self_.$confirm({
                            title: this.i18n('warning', '警告'),
                            content: this.i18n('removeFail', '移除失败：') + res.message,
                            okText: this.$ti18('rxForm.ackBtn', '确认'),
                            cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                        });
                        return;
                    }
                });
            },
            getIndex(id) {
                for (var i = 0; i < this.calendarEvents.length; i++) {
                    if (this.calendarEvents[i].id == id) {
                        return i;
                    }
                }
                return 0;
            },
            okFun() {
                Util.closeWindow(this, "ok");
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            },
        },
    };
</script>
<style scoped>
    .events {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .events .ant-badge-status {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        font-size: 12px;
    }

    .notes-month {
        text-align: center;
        font-size: 28px;
    }

    .notes-month section {
        font-size: 28px;
    }
</style>
